<template>
  <div
    class="pieChartBox"
    :id="id"
    style="min-width: 310px; height: 460px; margin: 0 auto"
  ></div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
    },
    resArr: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  watch: {
    resArr: {
      handler(newVal, oldVal) {
        this.resArr = newVal;
        this.showTreeMapChart();
      },
    },
  },
  activated() {},
  methods: {
    //add 字体自适应
    fontSize(res) {
      let docEl = document.documentElement,
        clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 750);
      return res * fontSize;
    },

    getOption: function () {
      // 属性设置：https://blog.csdn.net/chp891202/article/details/72312279
      let objColor = {};
      if (this.id == "treemapOne") {
        objColor = {
          minColor: "#FFF0F0",
          maxColor: "#FFF0F0",
        };
      } else {
        objColor = {
          minColor: "#F0F6FF",
          maxColor: "#F0F6FF",
        };
      }
      let option = {
        //背景颜色
        colorAxis: objColor,
        credits: {
          enabled: false, // 禁用版权信息
        },
        chart: {
          marginLeft: 0,
          marginRight: 0,
          marginTop: 0,
          marginBottom: 5,
        },
        //三个杠
        exporting: {
          enabled: false,
        },
        legend: {
          enabled: false,
        },
        plotOptions: {
          treemap: {
            allowPointSelect: false,
            borderWidth: 5, //边框宽度
            borderColor: "#fff", //边框颜色
            style: {
              borderColor: "#fff", //边框颜色
            },
            dataLabels: {
              allowPointSelect: false,
              enabled: true, //直接显示数据
              color: "#333",
              fontSize: 13,
              formatter: function () {
                return this.point.name + "<br/> " + this.point.value + "%";
              },
            },
          },
        },
        series: [
          {
            type: "treemap",
            layoutAlgorithm: "squarified",
            enableMouseTracking: false, //数据是否可点击

            data: this.resArr,
          },
        ],
        title: {
          text: "",
        },
      };
      return option;
    },

    showTreeMapChart() {
      let _this = this;
      this.$nextTick(() => {
        Highcharts.chart(this.id, this.getOption());
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      Highcharts.chart(this.id, this.getOption());
    });
  },
};
</script>

<style>
</style>
